<template>
    <div class="login-container">
        <div class="login-title">手机号登录/注册</div>
        <div class="content-container">
            <div class="text">
                <input type="text" placeholder="请输入手机号" v-model="phoneNumber">
            </div>
            <div class="text">
                <input type="text" placeholder="请输入校验码" v-model="code">
                <span class=" getcode" @click="getCode">
                    获取验证码
                </span>
            </div>
            <div class="radio">
                <span>
                    <label :for="checkboxId">
                        <input type="checkbox" name="radio" :value="true" :id="checkboxId" v-model="selectedOption">
                        已阅读并同意 <a href="">《用户协议》</a> 和 <a href="">《隐私政策》</a>，允许家教统一管理本人账号信息
                    </label>
                </span>

            </div>

            <div class="next">
                <input type="submit" value="下一步" @click="handleNextStep">
            </div>
            <div class="pwdlogin" @click="pwdlogin">账号密码登录</div>
        </div>
        <div class="bottom">
            <div class="otherwaylogin">
                或者通过以下方式登录
            </div>
            <div class="wechatimg">
                <i class="iconfont icon-weixin"></i>
            </div>
            <div class="bottom-content">
                <span>服务热线</span>
                <span>监督电话</span>
            </div>
        </div>
    </div>

</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from '@/api/index.ts';
import { useRouter } from 'vue-router'
import { showNotify } from 'vant';
import { useUserStore } from '@/stores/userStore'

onMounted(() => {
    const userStore = useUserStore()
    userStore.clearUser()
})

const router = useRouter()

const selectedOption = ref(false)
const phoneNumber = ref('')
const code = ref('')

const handleNextStep = async () => {
    if (selectedOption.value) {
        // 用户同意了条款，可以继续下一步
        // console.log("用户同意了条款，可以进行下一步操作");
        // 输入了手机号码和校验码，可以继续下一步
        if (!phoneNumber.value || !code.value) {
            showNotify({ type: 'primary', message: '请输入手机号和校验码' });
            return;
        }
        // 否则可以跳转到下一步
        // 向后端发送请求，验证手机号和校验码
        const res = await axios.post('/user/verifyCode', {
            phoneNumber: phoneNumber.value,
            code: code.value
        })
        // console.log(res);
        if (res.data.code !== '8000') {
            showNotify({ type: 'primary', message: `${res.data.msg}` });
            return;
        }

        router.push({
            path: '/login/next',
            query: {
                phoneNumber: phoneNumber.value,
                code: code.value
            }
        })

    } else {
        // 用户未同意条款，阻止进一步操作
        showNotify({ type: 'primary', message: '请先阅读并同意《用户协议》和《隐私政策》' });
    }
}

// 定义一个id用于label和input的关联
const checkboxId = 'agreementCheckbox';

const getCode = async () => {
    if (!phoneNumber.value) {
        showNotify({ type: 'primary', message: '请输入手机号码' });
        return;
    }
    // 检查手机号码格式是否正确，这里可以添加正则表达式验证
    const phoneRegex = /^1[3-9]\d{9}$/; // 假设是中国大陆手机号码的格式
    if (!phoneRegex.test(phoneNumber.value)) {
        showNotify({ type: 'primary', message: '请输入正确的手机号码格式' });
        return;
    }

    // 如果手机号码格式正确，调用发送验证码的API
    // console.log("手机号码:", phoneNumber.value);

    axios.post('/user/sendCode', {
        phoneNumber: phoneNumber.value
    }).then(res => {
        // console.log(res);
        if (res.code === '8005') {
            showNotify({ type: 'danger', message: `${res.data.msg}` });
        } else {
            showNotify({ type: 'success', message: `${res.data.msg}` });
        }
    })


    // sendCode(phoneNumber.value);
}
const pwdlogin = (phoneNumber) => {
    router.push('/login/pwd')
}
</script>

<style lang="less" scoped>
.login-container {
    height: 100vh;
    width: 100vw;
    padding: 0 0.72rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // background-image: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.AOQIVHyIwDgV0r8de0U4gwHaQB?w=161&h=349&c=7&r=0&o=5&dpr=1.4&pid=1.7');
    // background-size: cover;

    .login-title {
        margin-top: 3.52rem;
        font-size: 0.85rem;
        margin-bottom: 0.55rem;
    }

    .content-container {
        height: 7.2rem;
        position: relative;

        .text {
            position: relative;

            input {
                width: 8.4rem;
                height: 0.85rem;
                margin-bottom: 0.27rem;
                font-size: 0.48rem;
                color: #9A9A9A;
            }

            .getcode {
                position: absolute;
                right: 0.4rem;
                bottom: 0.6rem;
            }
        }

        .radio {
            margin-top: 0.6rem;

            span {
                letter-spacing: 3px;

                a {
                    color: rgb(255, 191, 107);
                }
            }
        }

        .next {
            width: 8.5rem;
            height: 0.92rem;
            margin-top: 0.66rem;

            input {
                width: 8.5rem;
                height: 1.2rem;
                background-color: rgb(255, 191, 107);
                color: #fff;
                font-size: 0.48rem;
                border-radius: 0.2rem;
            }
        }

        .pwdlogin {
            // right: 0;
            font-size: 0.375rem;
            position: absolute;
            bottom: 0.7rem;
            right: 0;
            color: #9A9A9A;
        }
    }

    .bottom {
        height: 4.74rem;
        // background: green;
        font-size: 0.377rem;
        text-align: center;
        // margin-bottom: 2rem;

        .wechatimg {
            margin-top: 1rem;

            i {
                font-size: 1rem;
                color: rgb(10, 188, 100)
            }

        }

        .bottom-content {
            display: flex;
            margin-top: 1rem;

            span {

                flex: auto;
            }
        }
    }
}
</style>